<template>
  <div>
    <a-space size="middle" :direction="direction" :wrap="true" style="margin-bottom: 30px">
      <a-button @click="setDirection">横向/竖向</a-button>
      <vc-popper content="这里是默认弹框">
        <template #reference>
          <a-button type="primary">默认</a-button>
        </template>
      </vc-popper>

      <vc-popper content="这里是弹框，上" placement="top">
        <template #reference>
          <a-button>top</a-button>
        </template>
      </vc-popper>
      <vc-popper content="这里是弹框，下" placement="bottom">
        <template #reference>
          <a-button>bottom</a-button>
        </template>
      </vc-popper>
      <vc-popper content="这里是弹框，左" placement="left">
        <template #reference>
          <a-button>left</a-button>
        </template>
      </vc-popper>
      <vc-popper content="这里是弹框，右" placement="right">
        <template #reference>
          <a-button>right</a-button>
        </template>
      </vc-popper>

      <vc-popper content="这里是弹框，上左" placement="top-start">
        <template #reference>
          <a-button>top-start</a-button>
        </template>
      </vc-popper>
      <vc-popper content="这里是弹框，下右" placement="bottom-end">
        <template #reference>
          <a-button>bottom-end</a-button>
        </template>
      </vc-popper>
      <vc-popper content="这里是弹框，左上" placement="left-start">
        <template #reference>
          <a-button>left-start</a-button>
        </template>
      </vc-popper>
      <vc-popper content="这里是弹框，右下" placement="right-end">
        <template #reference>
          <a-button>right-end</a-button>
        </template>
      </vc-popper>

      <vc-popper content="这里是弹框，触发方式：click" trigger="click">
        <template #reference>
          <a-button>click</a-button>
        </template>
      </vc-popper>
      <vc-popper content="这里是弹框，触发方式：toggle" trigger="toggle">
        <template #reference>
          <a-button>toggle</a-button>
        </template>
      </vc-popper>
      <vc-popper content="这里是弹框，触发方式：hover" trigger="hover">
        <template #reference>
          <a-button>hover</a-button>
        </template>
      </vc-popper>
      <vc-popper content="这里是弹框，触发方式：focus" trigger="focus">
        <template #reference>
          <a-button>focus</a-button>
        </template>
      </vc-popper>

      <vc-popper content="这里是弹框，挂载到body下" :appendToBody="true">
        <template #reference>
          <a-button>挂载到body下</a-button>
        </template>
      </vc-popper>

      <vc-popper content="这里是弹框，禁止" :appendToBody="true" :disabled="true">
        <template #reference>
          <a-button>禁止</a-button>
        </template>
      </vc-popper>

      <vc-popper content="这里是弹框，强制显示" :appendToBody="true" :forceShow="true">
        <template #reference>
          <a-button>强制显示</a-button>
        </template>
      </vc-popper>

      <vc-popper content="这里是弹框，不显示箭头" :showArrow="false">
        <template #reference>
          <a-button>不显示箭头</a-button>
        </template>
      </vc-popper>

      <vc-popper content="这里是弹框，受控弹窗" trigger="manual" v-model="open">
        <template #reference>
          <a-button @click="open = !open">受控弹窗</a-button>
        </template>
      </vc-popper>
    </a-space>
    <div class="flex justify-between">
      <div>
        <p class="mb-10">设置边界</p>
        <a-button @click="setBoundariesRef">切换ref/id-{{ boundariesType }}</a-button>
        <div
          id="boundaries"
          ref="boundariesRef"
          style="width: 500px; height: 500px; border: 1px solid red;"
        >
          <vc-popper content="这里是弹框，设置边界" :boundaryEle="boundaries">
            <template #reference>
              <a-button>设置边界</a-button>
            </template>
          </vc-popper>
        </div>
      </div>
      <div>
        <p class="mb-10">自定义触发元素</p>
        <a-button ref="referenceRef">自定义触发元素-ref</a-button>
        <vc-popper content="这里是弹框，自定义触发元素-ref" :reference="referenceRef"> </vc-popper>
        <div ref="referenceRef2">自定义触发元素-div</div>
        <vc-popper content="这里是弹框，自定义触发元素-div" :reference="referenceRef2"> </vc-popper>
        <div id="referenceRef3">自定义触发元素-id</div>
        <vc-popper content="这里是弹框，自定义触发元素-id" reference="#referenceRef3"> </vc-popper>
      </div>
      <div>
        <p class="mb-10">虚拟元素</p>
        <div
          id="virtualRect"
          style="width: 300px; height: 300px; border: 1px solid blue; margin-top: 10px"
        ></div>
        <vc-popper content="这里是弹框，虚拟元素" :virtualRef="virtualRef"> </vc-popper>
      </div>
      <div>
        <p class="mb-10">方法触发</p>
        <a-space>
          <vc-popper
            content="这里是弹框，方法触发"
            trigger="manual"
            ref="popperRef"
            v-model="isShow"
          >
            <template #reference>
              <a-button @click="popperRef.toggle()">方法触发-{{ isShow }}</a-button>
            </template>
          </vc-popper>
          <vc-popper content="这里是弹框，方法触发" trigger="manual" ref="popperRef2" :forceShow="true">
            <template #reference>
              <a-space>
                <a-button @click="popperRef2.show()">打开</a-button>
                <a-button @click="popperRef2.hide()">关闭</a-button>
              </a-space>
            </template>
          </vc-popper>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { on, off, getType } from '@/utils/config.js';
  import { onMounted } from 'vue';

  const direction = ref('horizontal');
  const setDirection = () => {
    direction.value = direction.value === 'horizontal' ? 'vertical' : 'horizontal';
  };

  const boundariesRef = ref(null);
  const boundaries = ref('#boundaries');
  const boundariesType = ref(getType(boundaries.value));
  const setBoundariesRef = () => {
    boundaries.value = boundaries.value === '#boundaries' ? boundariesRef.value : '#boundaries';
    boundariesType.value = getType(boundaries.value);
  };

  const referenceRef = ref(null);
  const referenceRef2 = ref(null);

  const virtualRef = ref(null);
  const open = ref(false);
  const getPoint = ({ clientX, clientY }) => {
    virtualRef.value = {
      getBoundingClientRect() {
        return {
          width: 0,
          height: 0,
          x: clientX,
          y: clientY,
          top: clientY,
          left: clientX,
          right: clientX,
          bottom: clientY,
        };
      },
      contextElement: document.querySelector('#virtualRect'),
    };
  };
  onMounted(() => {
    on(document.querySelector('#virtualRect'), 'click', getPoint);
  });

  const popperRef = ref(null);
  const popperRef2 = ref(null);
  const isShow = ref(false);
</script>
